import React, { useEffect, useState } from 'react';
import {
  Form,
  Row,
  Col,
  Button,
  Table,
  Select,
  DatePicker,
  message,
} from 'antd';
import { UserEdit, UserEditObject } from '@/pages/teacher/course/tEdit';
import request from '@/http';
import moment from 'moment';

interface ItemProps {
  label: string;
  value: string;
}

export default () => {
  const [pagination, setPagination] = useState({
    current: 1,
    total: 5,
    pageSize: 3,
    showSizeChanger: true,
    pageSizeOptions: ['3', '5', '10', '20'],
    showQuickJumper: true,
  });

  const [formObject] = Form.useForm();
  const [loading, setLoading] = useState(true);

  const [
    currentEditObject,
    setCurrentEditObject,
  ] = React.useState<UserEditObject>({
    isModalVisible: false,
  });

  const [dataSource, setDataSource] = useState();

  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    try {
      const result: any = await request.get(
        '/api/teacher/course/getAllCourse',
        {
          ...userParams,
          pageIndex: pageValue - 1,
          pageSizeValue: pageSizeValue,
        },
      );
      const newPageObject = {
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: result.records, //总条数 分页
      };
      if (result.message == '成功!') {
        const data = result.data.records.map((user: any) => ({
          key: user.id,
          projectDate: user.projectDate,
          courseId: user.id,
          courseName: user.courseName,
          trainTeacher: user.trainTeacher,
          dutyTeacher: user.dutyTeacher,
          signInTime: user.signInTime,
          signOutTime: user.signOutTime,
          classRome: user.classRome,
          remark: user.remark,
        }));
        setPagination(newPageObject);
        setLoading(false);
        setDataSource(data);
      }
    } catch (e) {
      message.error('暂无数据');
    }
  };

  useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
    selectDataSource();
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  const [courseName, setCourseName] = useState([]);
  const [teacherName, setTeacherName] = useState([]);

  const selectDataSource = async () => {
    const dataCourseName = await request.post(
      '/api/common_module/a_t_s/getCourse',
    );
    setCourseName(dataCourseName.data);

    const dataTeacherName = await request.post(
      '/api/common_module/a_t_s/getTeacher',
    );
    setTeacherName(dataTeacherName.data);
  };

  const columns = [
    {
      title: '日期',
      dataIndex: 'projectDate',
      key: 'projectDate',
    },
    {
      title: '项目名称',
      dataIndex: 'courseName',
      key: 'courseName',
    },
    {
      title: '实训老师',
      dataIndex: 'trainTeacher',
      key: 'trainTeacher',
    },
    {
      title: '责任老师',
      key: 'dutyTeacher',
      dataIndex: 'dutyTeacher',
    },
    {
      title: '签到时间',
      key: 'signInTime',
      dataIndex: 'signInTime',
    },
    {
      title: '签退时间',
      key: 'signOutTime',
      dataIndex: 'signOutTime',
    },
    {
      title: '教室',
      key: 'classRome',
      dataIndex: 'classRome',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '操作',
      key: 'action',
      render: (row: any) => (
        <Button
          type="link"
          onClick={(row: any) => {
            setCurrentEditObject({
              ...row,
              isModalVisible: true,
            });
          }}
        >
          查看学生
        </Button>
      ),
    },
  ];

  //项目课程表查询
  const selectCourse = async () => {
    const data = await formObject.getFieldsValue();
    const result: any = await request.get('/api/teacher/course/getAllCourse', {
      params: {
        startDate: data.projectDate
          ? moment(data.projectDate[0]).format('YYYY-MM-DD')
          : '',
        endDate: data.projectDate
          ? moment(data.projectDate[1]).format('YYYY-MM-DD')
          : '',
        courseName: data.courseName,
        dutyTeacher: data.dutyTeacher,
        trainTeacher: data.trainTeacher ? data.trainTeacher.toString() : '',
      },
    });
    if (result.message == '成功') {
      const data = result.data.records.map((user: any) => ({
        key: user.id,
        projectDate: user.projectDate,
        courseId: user.id,
        courseName: user.courseName,
        trainTeacher: user.trainTeacher,
        dutyTeacher: user.dutyTeacher,
        signInTime: user.signInTime,
        signOutTime: user.signOutTime,
        classRome: user.classRome,
        remark: user.remark,
      }));
      setDataSource(data);
    } else {
      setDataSource(result.data.records);
    }
  };

  /*重置搜索框*/
  const resetCourse = () => {
    formObject.resetFields();
    loadDataSource(null, 1, pagination.pageSize);
  };

  return (
    <>
      <Form form={formObject}>
        <Row gutter={24} wrap={false} style={{ width: '90%' }}>
          <Col span={6}>
            <Form.Item name="projectDate" label="日期">
              <DatePicker.RangePicker style={{ width: '100%' }} />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="courseName" label="课程名称">
              <Select style={{ width: '100%' }} placeholder="请选择">
                {(courseName || []).map((courseName: any) => {
                  return (
                    <option
                      key={courseName.courseId}
                      value={courseName.courseName}
                    >
                      {courseName.courseName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="dutyTeacher" label="责任老师">
              <Select style={{ width: '100%' }} placeholder="请选择">
                {(teacherName || []).map((teacherName: any) => {
                  return (
                    <option
                      key={teacherName.teacherId}
                      value={teacherName.teacherName}
                    >
                      {teacherName.teacherName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="trainTeacher" label="实训老师">
              <Select
                mode="tags"
                style={{ width: '100%' }}
                placeholder="请选择"
              >
                {(teacherName || []).map((teacherName: any) => {
                  return (
                    <option
                      key={teacherName.teacherId}
                      value={teacherName.teacherName}
                    >
                      {teacherName.teacherName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={5}>
            <Button type="primary" onClick={selectCourse}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={resetCourse}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <Table
        columns={columns}
        loading={loading}
        dataSource={dataSource}
        scroll={{ x: 1500 }}
        pagination={pagination}
        onChange={pageOnChange}
      />
      <UserEdit
        editObject={currentEditObject}
        onClose={loadDataSource}
      ></UserEdit>
    </>
  );
};
